<template>
    <div class="container">
        <el-scrollbar>
            <div class="card">
                <h2>首页</h2>
                <button @click="openAsync">{{ asyncVisiable ? '关闭' : '打开' }}异步组件</button>
                <button @click="openFuncComp">函数式组件</button>
                <button @click="to(item.url)" v-for="item in butttonList" :key="item.url">{{ item.title }}</button>
            </div>
        </el-scrollbar>
    </div>
    <myasync v-if="asyncVisiable"></myasync>

</template>

<script setup>
import { defineAsyncComponent, ref } from 'vue'
import { useRouter } from 'vue-router'
import viewsModuleList from '@/router/viewsModuleList.js'
import loading from '@/views/async/loading.vue'
import error from '@/views/async/error.vue'
import myAlert from '@/views/components/funcComponent/myAlert.js'

defineProps({
    msg: String,
})

const urlList = viewsModuleList.map(e => ({ url: '/' + e.name, title: e.title }))
const butttonList = ref(urlList)

const router = useRouter()
const to = (url) => {
    router.push(url)
}

//异步组件,仅在点击按钮显示后才加载
const myasync = defineAsyncComponent({
    loader: () => import('@/views/async/index.vue'),
    loadingComponent: loading,
    errorComponent: error,
    delay: 10,
    timeout: 1000,
})
const asyncVisiable = ref(false)
const openAsync = () => {
    asyncVisiable.value = !asyncVisiable.value
}
const openFuncComp = () => {
    myAlert({
        title: 'success info',
        type: 'success',
        duration: 0,
        callback(list) {
            console.log(list);
        },
        el: '' //挂载点
    })
}

</script>

<style  scoped>
.container {
    height: 95vh;
    margin: 20px;
    border-radius: 8px;
}
.card {
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(180px, 1fr)
    ); /* 定义列布局，自动填充 */
    grid-auto-rows: 100px; /* 定义自动行高度为 100px */
    overflow: auto;
}
h2 {
    width: 150px;
    text-align: center;
}

button {
    margin: 5px 0;
    width: 150px;
    font-size: 16px;
    font-weight: 700;
}
</style>
